/* screen - featured */

.featured {
  align-items: center;
  background-color: var(--cod-gray);
  display: flex;
  flex-direction: column;
  height: 3296px;
  width: 1920px;
}

.featured .frame-1171278823 {
  filter: blur(10px);
  height: 1080px;
  opacity: 0.3;
  position: relative;
  width: 1920px;
  z-index: 6;
}

.featured .frame-1171278823.animate-enter109 {
  animation: animate-enter109-frames 1.80s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0.3;
}

@keyframes animate-enter109-frames {
  from{opacity: 0.3;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.featured .frame-1171278733 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  left: 195px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 431px;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.featured .frame-1171278733.animate-enter106 {
  animation: animate-enter106-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter106-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .frame-1171278733:hover {
  background-color: #3e3e3e
}

.featured .overlap-group2 {
  height: 626px;
  left: 20px;
  position: relative;
  top: 19px;
  width: 707px;
}

.featured .overlap-group {
  height: 626px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.featured .frame-1171278688 {
  border-radius: 19.49px;
  height: 390px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translate(0, 25px);
  width: 707px;
}

.featured .frame-1171278688.animate-enter105 {
  animation: animate-enter105-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter105-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .overlap-group-3 {
  height: 568px;
  left: -25px;
  position: relative;
  top: -89px;
  width: 756px;
}

.featured .frame-1171278694-1 {
  left: 34px;
  top: 100px;
}

.featured .number {
  letter-spacing: 0;
  line-height: normal;
  min-height: 15px;
  white-space: nowrap;
}

.featured .mobile-app-design {
  left: 94px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 413px;
  white-space: nowrap;
}

.featured .ellipse-8183 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 138px;
  opacity: 0.11;
  position: absolute;
  top: 194px;
  width: 432px;
}

.featured .frame-1171278687 {
  align-items: flex-start;
  border: 0.49px solid;
  border-color: var(--white);
  border-radius: 32.65px;
  display: flex;
  height: 22px;
  left: 8px;
  overflow: hidden;
  padding: 4.6px 15.7px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.featured .ui-design {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1px;
  min-height: 12px;
  min-width: 51px;
  text-align: center;
  white-space: nowrap;
}

.featured .vector-3297 {
  cursor: pointer;
  height: 29px;
  left: 664px;
  position: absolute;
  top: 413px;
  transition: all 0.4s ease;
  width: 29px;
}

.featured .vector-3297:hover {
  transform: rotate(45deg);
}

.featured .exclude {
  height: 27px;
  left: 9px;
  position: absolute;
  top: 413px;
  width: 67px;
}

.featured .frame-1171278734 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 518px;
  left: 978px;
  overflow: hidden;
  padding: 0 19.0px;
  position: absolute;
  top: 431px;
  transition: all 0.2s ease;
  width: 747px;
}

.featured .frame-1171278734:hover {
  background-color: #3E3E3E
}

.featured .overlap-group-1 {
  height: 625px;
  margin-bottom: -127.0px;
  position: relative;
  width: 707px;
}

.featured .overlap-group-2 {
  height: 625px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.featured .frame-1171278688-1 {
  border-radius: 19.53px;
}

.featured .frame-1171278688-1.animate-enter107 {
  animation: animate-enter107-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter107-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .overlap-group-4 {
  height: 470px;
  left: 3px;
  position: relative;
  top: -39px;
  width: 703px;
}

.featured .x1 {
  cursor: pointer;
  height: 470px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: all 0.5s ease;
  width: 703px;
}

.featured .x1:hover {
  transform: scale(1.1);
}

.featured .frame-1171278694-2 {
  left: 6px;
  top: 49px;
}

.featured .mobile-app-design-1 {
  left: 117px;
  top: 413px;
}

.featured .ellipse-8183-1 {
  border-radius: 216px;
  height: 432px;
  left: 139px;
  opacity: 0.11;
  top: 193px;
  width: 432px;
}

.featured .frame-1171278687-1 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  border-radius: 32.71px;
  display: flex;
  height: 22px;
  left: 9px;
  overflow: hidden;
  padding: 4.9px 15.7px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.featured .vector-3297-1 {
  cursor: pointer;
  height: 29px;
  left: 665px;
  position: absolute;
  top: 413px;
  transition: all 0.4s ease;
  width: 29px;
}

.featured .vector-3297-1:hover {
  transform: rotate(45deg);
}

.featured .frame-1171278731 {
  background-color: var(--shark-3);
  border-radius: 55px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 901px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 179px;
  transition: all 0.4s ease;
  width: 117px;
}

.featured .frame-1171278731.animate-enter108 {
  animation: animate-enter108-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter108-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.featured .frame-1171278731:hover {
  transform: scale(1.1);
}

.featured .text-349 {
  color: var(--cyan--aqua);
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-m);
  font-weight: 600;
  left: 25px;
  letter-spacing: -0.40px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 11px;
  white-space: nowrap;
}

.featured .ui {
  left: 858px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 248px;
  white-space: nowrap;
}

.featured .ui-1 {
  left: 792px;
  letter-spacing: -0.72px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 326px;
  white-space: nowrap;
}

.featured .frame-19 {
  -webkit-backdrop-filter: blur(60px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(60px) brightness(100%);
  background-color: var(--black-2);
  border-radius: 23px;
  display: flex;
  gap: 915px;
  height: 70px;
  left: 40px;
  min-width: 1840px;
  padding: 11px 36px;
  position: fixed;
  top: 17px;
  z-index: 7;
}

.featured .group-1171278889:hover {
  filter: blur(5px);
}

.featured .group-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  min-width: 100px;
  transition: all 0.5s ease;
}

.featured .group-1:hover {
  transform: scale(1.1);
}

.featured .frame-1171278180 {
  background-color: var(--granite-gray-2);
  border-radius: 42px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.featured .frame-1171278180:hover {
  background-color: #585858
}

.featured .frame-11712781:hover {
  background-color: #383838
}

.featured .featured-1 {
  left: 21px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.featured .about-me {
  left: 18px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.featured .frame-1171278182:hover {
  background-color: #c5c5c5
}

.featured .place {
  left: 24px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.featured .frame-1171278732 {
  align-items: flex-start;
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--dove-gray);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  height: 70px;
  left: 1811px;
  overflow: hidden;
  padding: 24.5px 14.5px;
  position: fixed;
  top: 970px;
  transform: rotate(-90.00deg);
  transition: all 0.2s ease;
  width: 70px;
  z-index: 8;
}

.featured .frame-1171278732:hover {
  background-color: #141414
}

.featured .ui-ux {
  letter-spacing: -2.24px;
  line-height: normal;
  margin-right: 2.0px;
  margin-top: 45px;
  min-height: 67px;
  min-width: 316px;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
}

.featured .text-345 {
  letter-spacing: -0.72px;
  line-height: normal;
  margin-top: 10px;
  min-height: 21px;
  min-width: 332px;
  text-align: center;
  white-space: nowrap;
  z-index: 4;
}

.featured .frame-container {
  align-items: flex-start;
  display: flex;
  gap: 36px;
  margin-top: 110px;
  min-width: 1530px;
  z-index: 1;
}

.featured .frame-1171278730 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  opacity: 0.3;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.featured .frame-1171278730.animate-enter102 {
  animation: animate-enter102-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter102-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .frame-1171278730:hover {
  background-color: #3E3E3E
}

.featured .overlap-group3 {
  height: 625px;
  left: 19px;
  position: relative;
  top: 20px;
  width: 707px;
}

.featured .ellipse-8183-2 {
  border-radius: 216px;
  height: 432px;
  left: 138px;
  opacity: 0.11;
  top: 193px;
  width: 432px;
}

.featured .frame-container-1 {
  border-radius: 19.53px;
}

.featured .frame-1171278688-2 {
  border-radius: 19.53px;
}

.featured .frame-1171278688-2.animate-enter101 {
  animation: animate-enter101-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter101-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .overlap-group-5 {
  height: 564px;
  left: -23px;
  position: relative;
  top: -38px;
  width: 764px;
}

.featured .x1-1 {
  cursor: pointer;
  height: 564px;
  left: 95px;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 564px;
}

.featured .x1-1:hover {
  transform: scale(1.1);
}

.featured .frame-1171278694 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  left: 9px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  top: 10px;
  width: 87px;
}

.featured .dfkdfjk {
  border-radius: 32.71px;
  left: 107px;
  top: 458px;
}

.featured .dkfjdkf {
  border-radius: 32.71px;
  left: 9px;
  padding: 4.9px 15.7px;
  top: 458px;
}

.featured .frame-1171278697 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 518px;
  overflow: hidden;
  padding: 0 20.0px;
  transition: all 0.2s ease;
  width: 747px;
}

.featured .frame-1171278697:hover {
  background-color: #3E3E3E
}

.featured .ellipse-8183-3 {
  border-radius: 216px;
  height: 432px;
  left: 137px;
  opacity: 0.11;
  top: 193px;
  width: 432px;
}

.featured .frame-container-2 {
  border-radius: 19.51px;
}

.featured .frame-1171278688-3 {
  border-radius: 19.51px;
}

.featured .frame-1171278688-3.animate-enter103 {
  animation: animate-enter103-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter103-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .x1-2 {
  cursor: pointer;
  height: 471px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: -41px;
  transition: all 0.4s ease;
  width: 707px;
}

.featured .x1-2:hover {
  transform: scale(1.1);
}

.featured .dfkdfjk-1 {
  border-radius: 32.68px;
  left: 106px;
  top: 457px;
}

.featured .dkfjdkf-1 {
  border-radius: 32.68px;
  left: 8px;
  padding: 4.9px 15.7px;
  top: 457px;
}

.featured .frame-1171278699 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  align-items: flex-end;
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  display: flex;
  height: 518px;
  margin-right: 1.0px;
  margin-top: 91px;
  overflow: hidden;
  padding: 0 19.1px;
  transition: all 0.2s ease;
  width: 747px;
  z-index: 2;
}

.featured .frame-1171278699:hover {
  background-color: #3E3E3E
}

.featured .overlap-group7 {
  height: 626px;
  margin-bottom: -127.0px;
  margin-left: 2px;
  position: relative;
  width: 707px;
}

.featured .ellipse-8183-4 {
  border-radius: 216px;
  height: 432px;
  left: 137px;
  opacity: 0.11;
  top: 194px;
  width: 432px;
}

.featured .frame-1171278688-4 {
  background-color: var(--white);
  border-radius: 19.42px;
}

.featured .frame-1171278688-4.animate-enter104 {
  animation: animate-enter104-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter104-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.featured .group-1171278888:hover {
  transform: scale(1.1);
}

.featured .overlap-group-6 {
  height: 412px;
  position: relative;
  width: 518px;
}

.featured .x1-3 {
  height: 411px;
  left: 106px;
  object-fit: cover;
  position: absolute;
  top: 1px;
  width: 412px;
}

.featured .frame-1171278694-3 {
  left: 98px;
  top: 78px;
}

.featured .mobile-app-design-2 {
  left: 107px;
  top: 410px;
}

.featured .dkfjdkf-2 {
  border-radius: 32.54px;
  left: 7px;
  padding: 4.9px 15.2px;
  top: 455px;
}

.featured .ui-design-1 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 12px;
  min-width: 51px;
  text-align: center;
  white-space: nowrap;
}

.featured .vector-3297-2 {
  cursor: pointer;
  height: 29px;
  left: 663px;
  position: absolute;
  top: 411px;
  transition: all 0.4s ease;
  width: 29px;
}

.featured .vector-3297-2:hover {
  transform: rotate(45deg);
}

.featured .group-1171278882-1 {
  height: 30px;
  left: 7px;
  position: absolute;
  top: 410px;
  width: 97px;
}

.featured .frame-1171278824 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 402px;
  margin-left: 12.0px;
  margin-top: 347px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1722px;
  z-index: 5;
}

.featured .frame-1171278824:hover {
  background-color: #3E3E3E
}

.featured .overlap-group8 {
  height: 1024px;
  left: 348px;
  position: absolute;
  top: -882px;
  width: 1037px;
}

.featured .ellipse-8183-5 {
  border-radius: 512px;
  height: 1024px;
  left: 0;
  opacity: 0.05;
  top: 0;
  width: 1024px;
}

.featured .text-348 {
  left: 986px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.featured .ui-2 {
  left: 116px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.featured .uiux {
  left: 349px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.featured .group-1-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  height: 47px;
  left: 49px;
  min-width: 100px;
  position: absolute;
  top: 227px;
  transition: all 0.5s ease;
}

.featured .group-1-1:hover {
  transform: scale(1.1);
}

.featured .instagram {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 149px;
  width: 87px;
}

.featured .a24 {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.featured .artaloo {
  cursor: pointer;
  left: 697px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.featured .text-346 {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 210px;
  width: 87px;
}

.featured .epiphone {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 210px;
  width: 87px;
}

.featured .text-347 {
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 271px;
  width: 87px;
}

.featured .dfkdfjk-2 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  display: flex;
  height: 22px;
  overflow: hidden;
  padding: 4.9px 13.9px;
  position: absolute;
  width: 83px;
}

.featured .dkfjdkf-3 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  display: flex;
  height: 22px;
  overflow: hidden;
  position: absolute;
  width: 83px;
}

.featured .ellipse-8183-6 {
  background-color: var(--alto);
  filter: blur(284.5px);;
  position: absolute;
}

.featured .frame-1171278694-4 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  width: 87px;
}

.featured .frame-container-3 {
  height: 390px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.featured .mobile-app-design-3 {
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  white-space: nowrap;
}

.featured .tm-2 {
  height: 14px;
  letter-spacing: -0.98px;
  line-height: normal;
  margin-top: 8px;
}